<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css">
<link rel="stylesheet" href="../static/css/style-app.css" />
<script src="../static/jquery/jquery-1.12.4.js"></script>
<script src="../static/easyui/jquery.easyui.min.js"></script>
<script src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>摄像头</title>
</head>
<body>
	<div class="top-part">
		<div class="header">
			<div class="return">
				<a href="../app/index.do"></a>
			</div>
			<div class="header-title">摄像头列表</div>
		</div>

	</div>
	<div class="table-container" data-options="region:'center'">
		<div>
			<table id="pro_table" class="easyui-datagrid" style="min-height: 100%">
			</table>
			<div id="pro_tb" class="search-show">
				<div class="search-input">
					<span>项目：</span>
					<span  id="width1">
						<input style="width: 100%;" id="projectitemid" name="projectitemid" class="easyui-combobox"
							editable="false"
							data-options="
							    valueField: 'id',
							    textField: 'name',
							    url: '../projectitemlist.do?status=2',
							    onLoadSuccess : function(data){ 
								   	if(data.length>0){
								    	$('#projectitemid').combobox('setValue',data[0].id);
							    	}
							    },
							    onSelect: function(rec){
						    		projectitemid = rec.id;
							    	if(rec.projectitemchilds.length>0){
										var url = '../projectitemchildlist?projectitemid=' + rec.id;
										$('#projectitemchildid').combobox('reload', url);
										document.getElementById('div1').style.display = '';
							    	}else{
							    		projectitemchildid = 0;
										$('#projectitemchildid').combobox('clear');
										document.getElementById('div1').style.display = 'none';
										loadData();
							    	}
							    },panelHeight: 'auto'">
					</span>
				</div>
				<div id="div1" style="display: none;" class="search-input">
					<span>子项目：</span>
					<span>
						<input style="width: 100%;" id="projectitemchildid" name="projectitemchildid" class="easyui-combobox"
							editable="false"
							data-options="
							    valueField: 'id',
							    textField: 'name',
							    loadFilter: function (data) {
							        var obj = {};
							        obj.id = '';
							        obj.name = '全部';
							        data.splice(0, 0, obj);
							        return data;
							    },
							    onSelect: function(rec){
							    	projectitemchildid = rec.id;
							    	loadData();
							    },panelHeight: 'auto'">
					</span>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	var currentPro;
	var projectitemid;
	var projectitemchildid;
	$(function(){
		$("#projectitemchildid").combobox({ width:$("#width1").width()-3}); 
	})
	function loadData() {
		if (projectitemchildid > 0){
			$('#pro_table').datagrid(
					{
						rownumbers : true,
						singleSelect : true,
						pagination : true,
						fitColumns : false,
						border : false,
						striped : true,
						toolbar : '#pro_tb',
						url : "../cameras.do",
						method : 'get',
						queryParams : {
							projectitemchildid : projectitemchildid
						},
						onSelect : function(index,row) {
							currentPro = row;
						},
						onDblClickRow : function(index,row) {
							currentPro = row;
							updatepro();
						},
						columns : [ [ {
							field : 'no',
							title : '序列号',
							width : '100%',
							formatter : function(value,row,index) {
								var html = '';
								html += '<div class="info-unreviewed">'
								html += '<div class="info-item-name" style="width:'+ ellipsis(0) +'px;margin-bottom:10px;">' + row.no + '</div>'
								html += '<div class="info-item-content" style="width:'+ ellipsis(0) +'px;">' + row.name + '</div>'
								html += '<div class="info-content" style="width:'+ ellipsis(0) +'px;">' + row.location + '</div>'
								html += '<div class="info-handle"><a class="d-btn btn-green" href="#" onclick="addTab(' + index
										+ ')">进入监控</a></div></div>';
								return html;
							}
						} ] ]
					});
		}else{
			$('#pro_table').datagrid(
					{
						rownumbers : true,
						singleSelect : true,
						pagination : true,
						fitColumns : false,
						border : false,
						striped : true,
						toolbar : '#pro_tb',
						url : "../cameras.do",
						method : 'get',
						queryParams : {
							projectitemid : projectitemid
						},
						onSelect : function(index,row) {
							currentPro = row;
						},
						onDblClickRow : function(index,row) {
							currentPro = row;
							updatepro();
						},
						columns : [ [ {
							field : 'no',
							title : '序列号',
							width : '100%',
							formatter : function(value,row,index) {
								var html = '';
								html += '<div class="info-unreviewed">'
									html += '<div class="info-item-name" style="width:'+ ellipsis(0) +'px;margin-bottom:10px;">' + row.no + '</div>'
									html += '<div class="info-item-content" style="width:'+ ellipsis(0) +'px;">' + row.name + '</div>'
									html += '<div class="info-content" style="width:'+ ellipsis(0) +'px;">' + row.location + '</div>'
								html += '<div class="info-handle"><a class="d-btn btn-green" href="#" onclick="addTab(' + index
										+ ')">进入监控</a></div></div>';
								return html;
							}
						} ] ]
					});
		}
	}
	function addTab(index) {
		var item = $("#pro_table").datagrid('getRows')[index];
		var title = '监控-' + item.name;
		window.location.href = "../app/imouplayer.do?cameraid=" + item.id;
	}
	function ellipsis(value){
		var WIDTH = $("body").width();
		WIDTH-=10;
		var width;
		width = WIDTH-value
		return width;
	}
</script>

</html>